<!-- 系统管理/用户管理 -->
<template>
  <div id="user_management ">
    <!-- 搜索框 -->
    <el-form ref="formRef"
             :inline='true'
             :model="form"
             label-width="50px">
      <el-form-item label="账号:">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="昵称:">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>
      <el-form-item label="邮箱:">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="权限:">
        <el-input v-model="form.permission"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button type="info">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData.value"
              border
              style="width: 100%">
      <el-table-column fixed
                       prop="username"
                       align="center"
                       label="用户名"
                       width="150" />
      <el-table-column prop="nickname"
                       label="昵称"
                       width="150" />
      <el-table-column label="性别"
                       width="150">
        <template #default="scope">
          <el-tag v-if="scope.row.sex === 1">男</el-tag>
          <el-tag v-else-if="scope.row.sex === 2"
                  type="danger">女</el-tag>
          <el-tag v-else
                  type="info">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="email"
                       label="邮箱"
                       width="150" />
      <el-table-column prop="phone"
                       label="手机号码"
                       width="150" />
      <el-table-column label="注册时间"
                       width="200">
        <template #default="scope">
          {{scope.row.create_time}}
          <!-- {{filtertime(scope.row.create_time)}} -->
        </template>
      </el-table-column>
      <el-table-column label="注册时间"
                       width="200">
        <template #default="scope">
          {{scope.row.create_time}}
          <!-- {{filtertime(scope.row.create_time)}} -->
        </template>
      </el-table-column>
      <el-table-column label="注册时间"
                       width="200">
        <template #default="scope">
          {{scope.row.create_time}}
          <!-- {{filtertime(scope.row.create_time)}} -->
        </template>
      </el-table-column>
      <el-table-column label="是否管理员"
                       width="150">
        <template #default="scope">
          <el-tag v-if="scope.row.is_admin"
                  size="large">
            是
          </el-tag>
          <el-tag v-else
                  type="info"
                  size="large">
            否
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="180">
        <template #default>
          <el-button type="success"
                     size="small">修改</el-button>
          <el-button type="danger"
                     size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-row :gutter="24">
      <el-col :span="14"
              :offset="10"> -->
    <el-pagination v-model:currentPage="page"
                   v-model:page-size="size"
                   background
                   :page-sizes="[10, 20, 30, 40]"
                   :small="small"
                   layout=" -> ,total, sizes, prev, pager, next"
                   :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange">
    </el-pagination>
    <!-- </el-col>
    </el-row> -->
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { getAllUserInfo } from '@/api/user_manegement.js'
export default defineComponent({
  setup() {
    const page = ref(1)
    const size = ref(10)
    const total = ref(0)
    // 获取所有的用户
    const tableData = reactive([])
    const getTableData = () => {
      try {
        let popstVal = { page: page.value, size: size.value }
        getAllUserInfo(popstVal).then(res => {
          if (res && res.status !== '0') return ElMessage({
            message: res.message,
            type: 'error',
          })
          tableData.value = res.data.results
          total.value = res.data.total
          console.log(tableData.value);
        })
      } catch (err) {
        console.log(err);
      }
    }
    getTableData()
    const form = reactive({})

    // 条数发生变化
    const handleSizeChange = (value) => {
      size.value = value
      getTableData()
    }
    // 页数发生变化
    const handleCurrentChange = (value) => {
      page.value = value
      getTableData()
    }

    return {
      form, getTableData, tableData, handleSizeChange, handleCurrentChange, page, size, total
    };
  },
});
</script>

<style scoped lang="less">
#user_management {
}
</style>